<template>
    <div class="body-container" style="line-height: 0">
            <div class="block-header">
                <span class="hd">患者</span>
                <span class="div_">/</span>
                <span class="hd2">挂号列表</span>
            </div>

            <div class="patient-list">
                <el-table v-loading="loading"
                        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">

                    <el-table-column width="180"
                            label="创建日期"
                            prop="create_time">
                    </el-table-column>
                    <el-table-column width="80"
                            label="姓名"
                            prop="name">
                    </el-table-column>
                    <el-table-column width="80"
                            label="年龄"
                            prop="age">
                    </el-table-column>
                    <el-table-column width="150"
                            label="地址"
                            prop="address">
                    </el-table-column>
                    <el-table-column width="110"
                            label="联系方式"
                            prop="phone">
                    </el-table-column>
                    <el-table-column
                            align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleInfo(scope.row.id)">病况详情</el-button>
                            <el-button
                                    size="mini"
                                    @click="handleReport(scope.row.id)">病历详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
    </div>
</template>

<script>
    import {request} from "../api/request";

    export default {
        name: "PatientList",
        data() {
            return {
                loading: false,
                tableData: [],
                search: ''
            }
        },
        methods: {
            getCurrentTime(date) {
                return new Date(date).format('yyyy-MM-dd hh:mm:ss');
            },
            handleInfo(id) {
                this.$router.push('/index/patientInfo/' + id);
            },
            handleReport(id) {
                this.$router.push('/index/medicalRecord/' + id);
            }
        },
        mounted() {
            let that = this;
            that.loading = true;
            request({
                url: '/patient/list/' + that.$store.getters.getDoctorId,
                method: 'get',
            }).then(function (data) {
                data = data.data;
                if(data.code === 200) {
                    that.tableData = data.list;
                    for(let i = 0 ; i < that.tableData.length; i ++ ) {
                        that.tableData[i].create_time = that.getCurrentTime(that.tableData[i].create_time);
                    }
                    that.loading = false;
                } else {
                    that.loading = false;
                    that.$message.error(data.msg);
                }
            }).catch(function (err) {
                that.loading = false;
                that.$message.error('患者列表信息获取失败');
            })
        }
    }
</script>

<style scoped>
    .body-container {
        width: 100%;
        height: 100%;
    }

    /*清除浮动*/
    .clearfix:after {
        content: " ";
        display: block;
        clear: both;
    }
    *, ::after, ::before {
        box-sizing: border-box;
    }
    div {
        display: block;
    }
    .info_main{
        width: 100%;
        height: 100%;

    }
    ul,ol,dl {
        margin-top: 0;
    }
    p {
        display: block;
        line-height: 1.61em;
        margin-top: 0;
        margin-bottom: 1rem;
    }
    h2 {
        line-height: 1.4;
    }
    hr {
        margin: 1rem 0;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
        overflow: visible;
    }
    address {
        margin-bottom: 1rem;
        line-height: inherit;
    }
    .row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15px;
    }
    .block-header {
        background-color: #fff;
        height: 64px;
        color: #2c2c2c;
        padding: 15px;
        font-weight: 400;
        font-size: 15px;
        text-align: left;
        margin-bottom: 20px;
        width: 99%;
        margin: 0 auto;
        margin-bottom: 30px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgb(82 63 105 / 8%);
        margin-left: 10px;
        /*background-color: lightcoral;*/
        line-height: 64px;
        overflow: hidden;
        padding-top: 0;
    }


    .block-header h2 {
        margin: 0!important;
        font-size: 20px;
    }

    .container-fluid {
        width: 100%;
        padding: 0 15px;
        margin: 0 auto;
    }
    div .card {
        background: #fff;
        transition: .5s;
        border: 0;
        /*border-radius: 0.1875rem;*/
        position: relative;
        width: 100%;
        margin-bottom: 30px;
        display: inline-block;
        word-wrap: break-word;
        flex-direction: column;
        border-radius: 20px;
        box-shadow: 0 0 10px rgb(82 63 105 / 8%);
    }
    .img-thumbnail {
        padding: 0.25rem;
        background-color: #fff;
        border-radius: 0.25rem;
        max-width: 100%;
        height: auto;
        border:1px solid #dee2e6;
    }
    .card img {
        border-radius: 20px;
    }
    .card .header {
        color: #424242;
        padding: 20px;
        position: relative;
        box-shadow: none;
    }
    .card .header h2 {
        text-align: left;
        font-size: 17px;
        color: #757575;
        position: relative;
    }
    .card .header h2 strong {
        color: #1362FC;
    }


    .card .header h2::before {
        position: absolute;
        width: 13px;
        height: 2px;
        left: -20px;
        top: 8px;
        content: '';
        background: #1362FC;
    }
    .card .body {
        font-size: 14px;
        color: #424242;
        padding: 20px;
        font-weight: 400;
        text-align: left;
        line-height: 1.5;
        padding-top: 0;
    }

    .nav {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin-bottom: 0;

    }
    .nav-tabs {
        padding: 15px 0.7rem;
    }
    .nav-item {
        margin-bottom: -1px;
        display: list-item;
    }

    .nav-tabs .nav-link.active {
        border: 1px solid #ab9ae5 !important;
        border-radius: 30px;
        color: #888;
        font-size: 14px;
        padding: 11px 23px;
        line-height: 1.5;

    }
    .header {
        width: 98%;
        height: 80px;
        line-height: 100%;
        background-color: white;
        margin: 0 auto;
        box-shadow: 0 0 10px rgb(82 63 105 / 8%);
        border-radius: 8px;
        text-align: left;
    }
    .hd, .hd2 {
        display: inline-block;
        width: 42px;
        height: 64px;
        line-height: 64px;
        margin-left: 16px;
        font-weight: 600;
        /*color: #627EEA;*/
        color: #1362FC;
        letter-spacing: 1px;
        overflow: hidden;
        /*background-color: lightgoldenrodyellow;*/
    }
    .div_ {
        overflow: hidden;
        display: inline-block;
        padding: 0;
        font-size: 30px;
        height: 60px;
        line-height: 60px;
        color: #1362FC;
        font-weight: 300;
        /*margin-top: 5px;*/
    }
    .hd2 {
        margin-left: 10px;
        width: 180px;
        color: #828690;
        font-weight: 500;
    }


</style>